<template>
  <div class="forgot-password-container">
    <div class="forgot-password-box">
      <h1 class="system-title">盼寻密友</h1>
      <div class="forgot-password-form">
        <h2 class="title">忘记密码</h2>
        <div v-if="!resetCodeSent">
          <div class="form-group">
            <label for="email">邮 箱：</label>
            <input
              id="email"
              v-model="email"
              class="forgot-password-input"
              type="email"
              placeholder="请输入注册时使用的邮箱"
              @keyup.enter="sendResetCode"
            />
            <div v-if="emailError" class="error-message">{{ emailError }}</div>
          </div>
          <button class="send-code-btn" @click="sendResetCode">
            <span class="btn-text">发送验证码</span>
          </button>
        </div>
        <div v-else>
          <div class="form-group">
            <label for="resetCode">验证码：</label>
            <input
              id="resetCode"
              v-model="resetCode"
              class="forgot-password-input"
              type="text"
              placeholder="请输入邮箱收到的验证码"
              @keyup.enter="verifyCode"
            />
            <div v-if="codeError" class="error-message">{{ codeError }}</div>
          </div>
          <div class="form-group">
            <label for="newPassword">新密码：</label>
            <input
              id="newPassword"
              v-model="newPassword"
              class="forgot-password-input"
              type="password"
              placeholder="请输入新密码"
              @keyup.enter="resetPassword"
            />
          </div>
          <div class="form-group">
            <label for="confirmPassword">确认密码：</label>
            <input
              id="confirmPassword"
              v-model="confirmPassword"
              class="forgot-password-input"
              type="password"
              placeholder="请再次输入新密码"
              @keyup.enter="resetPassword"
            />
            <div v-if="passwordMismatch" class="error-message">两次输入的密码不一致</div>
          </div>
          <button class="reset-password-btn" @click="resetPassword">
            <span class="btn-text">重置密码</span>
          </button>
        </div>
        <div class="form-links">
          <a href="#" @click.prevent="handleBackToLogin">< 返回登录</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ForgotPassword",
  data() {
    return {
      email: "",
      resetCode: "",
      newPassword: "",
      confirmPassword: "",
      resetCodeSent: false,
      emailError: "",
      codeError: "",
      passwordMismatch: false
    };
  },
  methods: {
    // 验证邮箱格式
    validateEmail() {
      this.emailError = "";
      
      if (!this.email) {
        this.emailError = "请输入邮箱";
        return false;
      }
      
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(this.email)) {
        this.emailError = "邮箱格式不正确";
        return false;
      }
      
      return true;
    },
    
    // 发送重置验证码
    async sendResetCode() {
      if (!this.validateEmail()) {
        return;
      }
      
      try {
        // 这里应该调用API发送重置验证码
        // const response = await sendResetCode(this.email);
        // 模拟发送成功
        this.resetCodeSent = true;
        this.$message.success("验证码已发送至您的邮箱，请查收");
      } catch (error) {
        console.error("发送验证码出错:", error);
        this.emailError = "发送验证码失败，请稍后再试";
      }
    },
    
    // 验证验证码
    async verifyCode() {
      this.codeError = "";
      
      if (!this.resetCode) {
        this.codeError = "请输入验证码";
        return false;
      }
      
      try {
        // 这里应该调用API验证验证码
        // const response = await verifyResetCode(this.email, this.resetCode);
        // 模拟验证成功
        this.$message.success("验证码验证成功，请设置新密码");
        return true;
      } catch (error) {
        console.error("验证验证码出错:", error);
        this.codeError = "验证码错误或已过期";
        return false;
      }
    },
    
    // 重置密码
    async resetPassword() {
      // 验证验证码
      if (!(await this.verifyCode())) {
        return;
      }
      
      // 验证密码
      if (!this.newPassword) {
        this.$message.error("请输入新密码");
        return;
      }
      
      if (this.newPassword.length < 6) {
        this.$message.error("密码长度至少6位");
        return;
      }
      
      if (this.newPassword !== this.confirmPassword) {
        this.passwordMismatch = true;
        this.$message.error("两次输入的密码不一致");
        return;
      }
      
      try {
        // 这里应该调用API重置密码
        // const response = await resetPassword(this.email, this.resetCode, this.newPassword);
        // 模拟重置成功
        this.$message.success("密码重置成功，请使用新密码登录");
        this.$router.push("/login");
      } catch (error) {
        console.error("重置密码出错:", error);
        this.$message.error("重置密码失败，请稍后再试");
      }
    },
    
    // 返回登录页面
    handleBackToLogin() {
      this.$router.push("/login");
    }
  }
};
</script>

<style scoped>
.forgot-password-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.forgot-password-box {
  width: 100%;
  max-width: 400px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  overflow: hidden;
  animation: slideUp 0.6s ease-out;
}

.system-title {
  text-align: center;
  margin-bottom: 30px;
  color: #1890ff;
  font-size: 28px;
  font-weight: 600;
}

.forgot-password-form {
  padding: 30px 40px;
}

.title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
}

.forgot-password-input {
  width: 100%;
  padding: 15px 15px 15px 45px;
  border: 2px solid #e1e5e9;
  border-radius: 10px;
  font-size: 16px;
  transition: all 0.3s ease;
  box-sizing: border-box;
  background: #f8f9fa;
}

.forgot-password-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  background: white;
}

.send-code-btn, .reset-password-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
  margin-bottom: 20px;
}

.send-code-btn:hover:not(:disabled), .reset-password-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.send-code-btn:disabled, .reset-password-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.form-links {
  text-align: center;
  margin-top: 20px;
}

.form-links a {
  color: #667eea;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
}

.form-links a:hover {
  color: #764ba2;
  text-decoration: underline;
}

.error-message {
  color: #ff4d4f;
  font-size: 12px;
  margin-top: 5px;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 移动端优化 */
@media (max-width: 767px) {
  .forgot-password-box {
    margin: 10px;
    border-radius: 15px;
  }
  
  .system-title {
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .title {
    font-size: 20px;
    margin-bottom: 20px;
  }
  
  .forgot-password-input {
    font-size: 16px; /* 防止iOS缩放 */
  }
  
  .form-links a {
    font-size: 13px;
  }
}
</style>